<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { reactive } from 'vue'
const sieveform = reactive({
    character: '',
    status: [],
    contract: [],
    rank: '',
    customlabel: '',
    department: '',
    region: '',
    taxtype: [],
    datetime: '',
    resource: '',
    month: '',
    customtype: [],
    location: [],
    saleplatform: '',
    })
const columns = [
    {
        title: '客户简称',
        key: 'name',
        sortable: true,
    },
    {
        title: '客户编号',
        key: 'number',
        sortable: true,
    },
    {
        title: '客户状态',
        key: 'status',
    },
    {
        title: '提交人',
        key: 'submitter'
    },
        {
        title: '申请时间',
        key: 'applytime',
        sortable: true,
    },
        {
        title: '流失原因',
        key: 'reason'
    },
        {
        title: '申请状态',
        key: 'applystatus',
    },
];
const mockData = ref([]);
const loading = ref(true)

const activeName = ref('first')
const handleClick = (tab, event) => {
    console.log(tab, event);

    loading.value = true
    setTimeout(() => {
        if(activeName.value === 'first') {
            mockData.value = []
            loading.value = false
            return;
        }
        mockData.value = [
            {
                name: '张三',
                number: 252436346324,
                status: '已代账',
                submitter: '13812345678',
                applytime: '2025-06-12',
                reason: '13812345678',
                applystatus: '已代账',
            },
            {
                name: '张三',
                number: 252436346324,
                status: '已代账',
                submitter: '13812345678',
                applytime: '2025-06-12',
                reason: '13812345678',
                applystatus: '已代账',
            },
            {
                name: '张三',
                number: 252436346324,
                status: '已代账',
                submitter: '13812345678',
                applytime: '2025-06-12',
                reason: '13812345678',
                applystatus: '已代账',
            }
        ]
        loading.value = false
    }, 2000)
}
onMounted(() => {
    setTimeout(() => {
        mockData.value = [
            {
                name: '张三',
                number: 252436346324,
                status: '已代账',
                submitter: '13812345678',
                applytime: '2025-06-12',
                reason: '13812345678',
                applystatus: '已代账',
            },
            {
                name: '张三',
                number: 252436346324,
                status: '已代账',
                submitter: '13812345678',
                applytime: '2025-06-12',
                reason: '13812345678',
                applystatus: '已代账',
            },
            {
                name: '张三',
                number: 252436346324,
                status: '已代账',
                submitter: '13812345678',
                applytime: '2025-06-12',
                reason: '13812345678',
                applystatus: '已代账',
            }
        ]
        loading.value = false
    }, 2000)
})
</script>
<template>
    <div class="loss">
        <div class="top-filter">
            <div class="top-filter-left">
                <stick-popup>
                    <template #show>
                        <div class="top-filter-btn">
                            <div class="top-filter-btn-label">
                                筛选
                            </div>
                            <div class="top-filter-btn-icon">
                                <Operation />
                            </div>
                        </div>
                    </template>
                    <template #content>
                        <!-- 筛选表单 -->
                        <div class="top-filter-form">
                            <el-form :model="sieveform" label-width="auto" style="max-width: 600px">
                                <el-form-item label="服务角色：">
                                    <el-select placeholder="搜索服务角色" v-model="sieveform.character">
                                        <el-option label="服务顾问" value="服务顾问" />
                                        <el-option label="其他服务人员" value="其他服务人员" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="代账服务状态：">
                                    <el-checkbox-group v-model="sieveform.status">
                                        <el-checkbox value="服务中" name="type">
                                            服务中
                                        </el-checkbox>
                                        <el-checkbox value="暂停服务" name="type">
                                            暂停服务 
                                        </el-checkbox>
                                        <el-checkbox value="已流失" name="type">
                                            已流失 
                                        </el-checkbox>
                                        <el-checkbox value="未建账" name="type">
                                            未建账  
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                                <el-form-item label="合同：">
                                    <el-checkbox-group v-model="sieveform.contract">
                                        <el-checkbox value="合同服务中" name="type">
                                            合同服务中
                                        </el-checkbox>
                                        <el-checkbox value="合同已结束" name="type">
                                            合同已结束 
                                        </el-checkbox>
                                        <el-checkbox value="无合同" name="type">
                                            无合同 
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                                <el-form-item label="客户等级：">
                                    <el-select v-model="sieveform.rank" placeholder="搜索客户等级">
                                        <el-option label="一般客户" value="一般客户" />
                                        <el-option label="重要客户" value="重要客户" />
                                        <el-option label="VIP客户" value="VIP客户" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="客户标签：">
                                    <el-select v-model="sieveform.customlabel" placeholder="搜索客户标签">
                                        <el-option label="包含" value="包含" />
                                        <el-option label="不包含" value="不包含" />
                                        <el-option label="任一" value="任一" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="所属部门：">
                                    <el-select v-model="sieveform.department" placeholder="搜索所属部门">
                                        <el-option label="九江研发团队" value="九江研发团队" />
                                        <el-option label="百账汇" value="百账汇" />
                                        <el-option label="江西日月眼镜" value="江西日月眼镜" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="片区：">
                                    <el-select v-model="sieveform.region" placeholder="搜索片区">
                                        <el-option label="华南" value="华南" />
                                        <el-option label="华东" value="华东" />             
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="增值税类型：">
                                    <el-checkbox-group v-model="sieveform.taxtype">
                                        <el-checkbox value="全部" name="type">
                                            全部
                                        </el-checkbox>
                                        <el-checkbox value="一般纳税人" name="type">
                                            一般纳税人 
                                        </el-checkbox>
                                        <el-checkbox value="小规模纳税人" name="type">
                                            小规模纳税人 
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                                <!-- 时间控件 -->
                                <el-form-item label="Activity time">
                                    <el-col :span="11">
                                        <el-date-picker
                                        v-model="sieveform.datetimestart"
                                        type="date"
                                        placeholder="请选择日期"
                                        style="width: 100%"
                                        />
                                    </el-col>
                                    <el-col :span="2" class="text-center">
                                        <span class="text-gray-500">-</span>
                                    </el-col>
                                    <el-col :span="11">
                                        <el-time-picker
                                        v-model="sieveform.datetimefinish"
                                        placeholder="请选择日期"
                                        style="width: 100%"
                                        />
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="来源：">
                                    <el-select v-model="sieveform.resourse" placeholder="请选择">
                                        <el-option label="邹辉龙" value="邹辉龙" />
                                        <el-option label="邓杰" value="邓杰" />             
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="公司成立月份：">
                                    <el-select v-model="sieveform.month" placeholder="搜索公司成立月份：">
                                        <el-option label="1" value="1" />
                                        <el-option label="2" value="2" />             
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="客户类型：">
                                    <el-checkbox-group v-model="sieveform.customtype">
                                        <el-checkbox value="全部1" name="type">
                                            全部
                                        </el-checkbox>
                                        <el-checkbox value="代账客户（执行中）" name="type">
                                            代账客户（执行中） 
                                        </el-checkbox>
                                        <el-checkbox value="代账客户（合同结束或终止）" name="type">
                                            代账客户（合同结束或终止） 
                                        </el-checkbox>
                                        <el-checkbox value="非代账客户" name="type">
                                            非代账客户
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                                <el-form-item label="所在地区：">
                                    <el-select v-model="sieveform.location" placeholder="请选择省：">
                                        <el-option label="江西省" value="江西省" />
                                        <el-option label="广东省" value="广东省" />             
                                    </el-select>
                                </el-form-item>
                                
                                <el-form-item label= "营销平台：">
                                    <el-radio-group v-model="sieveform.saleplatform">
                                        <el-radio value="Sponsor">全部</el-radio>
                                        <el-radio value="Venue">慧营销</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                    <template #footer>
                        <div class="top-filter-operate">
                            <el-button type="primary">确定</el-button>
                            <el-button type="text">重置</el-button>
                        </div>
                    </template>
                </stick-popup>
                <div class="top-filter-search">
                     <el-input
                        v-model="input1"
                        placeholder="请输入客户简称或编号或税号"
                        >
                        <template #append>
                            <el-button :icon="Search" />
                        </template>
                    </el-input>
                </div>
                <!-- <div class="top-filter-checkbox">
                    <el-checkbox v-model="checked1" label="包含流失" size="default" border />
                </div> -->
            </div>
            <div class="top-filter-right">
                <el-dropdown split-button type="primary" @click="">
                    新增流失
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>删除流失</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-button>导出</el-button>
            </div>
        </div>
        <div class="table-area">
            <div class="table-area-tab">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="全部" name="first"></el-tab-pane>
                    <el-tab-pane label="待提交" name="second"></el-tab-pane>
                    <el-tab-pane label="待主管审核" name="third"></el-tab-pane>
                    <el-tab-pane label="待财务审核" name="fourth"></el-tab-pane>
                    <el-tab-pane label="待流失审核" name="fifth"></el-tab-pane>
                    <el-tab-pane label="审核不通过" name="sixth"></el-tab-pane>
                    <el-tab-pane label="审核通过" name="seventh"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="table-area-table">
                <my-table :loading="loading" :columns="columns" :dataSource="mockData" :showIndex="true" :show-operation="false">
                    <!-- <template #data-age="scope">
                        <span>{{ scope.data }}</span>
                    </template>
                    <template #filter-age>
                        <span>年龄213123123123123</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #filter-address>
                        <span>地址12恶趣味委屈委屈12312312312312</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #operation>
                        <span><button>删除</button></span>
                    </template> -->
                </my-table>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
.loss {
    width: 100%;
    height: 100%;
    background-color: rgb(239,239,239);
    overflow: auto;
}
.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 9;
}
.top-filter-left {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    .top-filter-btn {
        width: 80px;
        height: 30px;
        border-radius: 5px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        user-select: none;
        .top-filter-btn-icon {
            width: 20px;
            height: 20px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .top-filter-search {
        width: 200px;
    }
}
.table-area {
    width: 94%;
    margin: 20px auto;
    box-shadow: 0 0 10px 0 #ddd;
    background-color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    .table-area-tab {
        width: 100%;
        box-sizing: border-box;
    }
    .table-area-table {
        width: 100%;
        box-sizing: border-box;
    }
}

.top-filter-form, .top-filter-operate {
    width: 400px;
    background-color: #fff;
}
</style>
